<template>
  <div>
    <div class="header">
      <div class="logoTitleSide">
        <img
          src="../img/logo.png"
          class="logoArea"
          alt
          style="width:25px;margin-right:10px;margin-left:8px;"
        >
        <div class="titleArea">
          <router-link to="/">
            <span class="pageTitle">80教育商城</span>
          </router-link>
        </div>
      </div>
      <div class="toolMenuSide">
        <div class="userEnterAera">
          <span>|</span>
          <span class="userEnterText" @click="mine">会员中心</span>
        </div>
        <div class="seacherAera">
          <i class="iconfont icon-search"></i>
          <span class="seacherAeraText">搜索</span>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
      <!-- <div class="middleCenter">
        <div class="newsLine">
          <p class="twoLineHidden">19泵的工作原理，看图秒懂，涨知识啊</p>
          <img src="../img/zl.jpg" alt>
        </div>
        <div class="newsLine">
          <p class="twoLineHidden">生物处理污水方法动图大全——非常值得一看</p>
          <img src="../img/zl.jpg" alt>
        </div>
      </div>
      <div class="pagenation">
        <div class="pagebox">
          <div class="pagePrev page">
            <span>&lt;</span>
          </div>
          <div class="pagesize">
            <span>1/1</span>
          </div>
          <div class="pageNext page">
            <span>&gt;</span>
          </div>
        </div>
      </div>-->
    </div>
    <div class="nav clearfix">
      <div class="titletext">文章导航</div>
      <router-link to="/Share/guanxuan">
        <div class="text">
          <ul>
            <li>八零官宣</li>
            <span>&gt;</span>
          </ul>
        </div>
      </router-link>
      <router-link to="/Share/consult">
        <div class="text">
          <ul>
            <li>注考咨询</li>
            <span>&gt;</span>
          </ul>
        </div>
      </router-link>
      <div class="text">
        <ul>
          <li>注考心得</li>
          <span>&gt;</span>
        </ul>
      </div>
      <div class="text">
        <ul>
          <li>资料分享</li>
          <span>&gt;</span>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import session from "../util/session";
export default {
  methods: {
    mine() {
      if (session.isLogin()) {
        this.$router.push("/member");
      } else {
        alert("请先登录");
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style scoped>
.text li {
  margin-left: 37px;
  float: left;
}
ul,
li {
  list-style: disc;
}
.content {
  margin-top: 10px;
}
.text span {
  float: right;
  margin-right: 10px;
  color: #6f6d6d;
}
.clearfix:after {
  clear: both;
  display: block;
  content: "";
}
.text {
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #e0d9d9;
}
.nav {
  background: #fff;
  margin-top: 10px;
}
.titletext {
  border-bottom: 1px #e0d9d9 solid;
  color: #3285ff;
  font-size: 16px;
  height: 52px;
  line-height: 52px;
  text-indent: 16px;
}
.pagebox {
  width: 200px;
  display: flex;
  position: relative;
  margin: 0 auto;
  top: 12px;
}
.page span {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 20px;
  color: #fff;
}
.pagePrev {
  position: absolute;
  left: 0;
}
.pagesize {
  flex-grow: 1;
  line-height: 35px;
}
.pageNext {
  float: right;
  position: absolute;
  right: 0;
}
.page {
  width: 35px;
  height: 35px;
  background: #3285ff;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background-size: 100%;
  position: relative;
}

.pagenation {
  clear: both;
  color: #333;
  height: 59px;
  width: 100%;
  text-align: center;
  position: relative;
  background: #fff;
}
.twoLineHidden {
  float: left;
  line-height: 58px;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  width: 80%;
  height: 55px;
}
.newsLine img {
  float: right;
  width: 50px;
  height: 50px;
  position: relative;
  top: 4px;
  left: -7px;
}
.newsLine {
  height: 58px;
  padding: 5px;
  background: #fff;
  border: 1px solid #f6f6f6;
}
</style>
